<!--
	此示例下载自 https://echarts.apache.org/examples/zh/editor.html?c=data-transform-sort-bar
-->
<!DOCTYPE html>
<html lang="en" style="height: 100%">

<head>
    <meta charset="utf-8">
</head>

<body style="height: 100%; margin: 0">
    <div id="container" style="height: 100%"></div>


    <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>

    <!-- Uncomment this line if you want to dataTool extension
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5/dist/extension/dataTool.min.js"></script>
  -->
    <!-- Uncomment this line if you want to use gl extension
  <script type="text/javascript" src="https://echarts.apache.org/zh/js/vendors/echarts-gl/dist/echarts-gl.min.js"></script>
  -->
    <!-- Uncomment this line if you want to echarts-stat extension
  <script type="text/javascript" src="https://echarts.apache.org/zh/js/vendors/echarts-stat/dist/ecStat.min.js"></script>
  -->
    <!-- Uncomment this line if you want to echarts-graph-modularity extension
  <script type="text/javascript" src="https://echarts.apache.org/zh/js/vendors/echarts-graph-modularity/dist/echarts-graph-modularity.min.js"></script>
  -->
    <!-- Uncomment this line if you want to use map
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@4.9.0/map/js/world.js"></script>
  -->
    <!-- Uncomment these two lines if you want to use bmap extension
  <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=YOUR_API_KEY"></script>
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5/dist/extension/bmap.min.js"></script>
  -->

    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script type="text/javascript">
        $.ajax({
            type: "GET",
            url: "http://121.199.61.105/scoreData",
            dataType: "json",
            success: function (scoredata) {
                var dom = document.getElementById('container');
                var myChart = echarts.init(dom, null, {
                    renderer: 'canvas',
                    useDirtyRect: false
                });
                var app = {};

                var option;

                option = {
                    dataset: [
                        {
                            dimensions: ['tname', 'avgscore'],
                            source: scoredata
                        },
                        {
                            transform: {
                                type: 'sort',
                                config: { dimension: 'avgscore', order: 'desc' }
                            }
                        }
                    ],
                    xAxis: {
                        type: 'category',
                        axisLabel: { interval: 0, rotate: 30 }
                    },
                    yAxis: {},
                    series: {
                        type: 'bar',
                        encode: { x: 'tname', y: 'avgscore' },
                        datasetIndex: 1
                    }
                };

                if (option && typeof option === 'object') {
                    myChart.setOption(option);
                }

                window.addEventListener('resize', myChart.resize);
            }
        });
    </script>
</body>

</html>